<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4-Promise-链式调用-解决回调地狱</title>
  </head>
  <body>
    <h2>Promise-链式调用-解决回调地狱</h2>
    <form>
      <span>省份：</span>
      <select>
        <option class="province"></option>
      </select>
      <span>城市：</span>
      <select>
        <option class="city"></option>
      </select>
      <span>地区：</span>
      <select>
        <option class="area"></option>
      </select>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.3/axios.js"></script>
    <script>
      /**
       * 需求: 展示数据到下拉框中(Promise链式编程)
       *  1. 获取省份数据并展示第1个省
       *  2. 获取第1个省的城市数据,并展示第1个城市
       *  3. 获取第1个城市的区数据，并展示第1个区
       * */
      // 3.1 pname改为全局变量，方便后续使用
      let pname
      // 1. 获取省份数据并展示第1个省
      axios({
        url: 'https://hmajax.itheima.net/api/province'
      })
        .then(res => {
          // console.log(res)

          // 3.2 pname保存第一个省的数据
          pname = res.data.list[0]
          document.querySelector('.province').innerHTML = pname

          // 2. 获取第1个省的城市数据,并展示第1个城市
          return axios({
            url: 'https://hmajax.itheima.net/api/city',
            params: {
              pname
            }
          })
        })
        .then(res => {
          console.log(res)
          const cname = res.data.list[0]
          document.querySelector('.city').innerHTML = cname
          // 3.3 获取第1个城市的区数据，并展示第1个区
          return axios({
            url: 'https://hmajax.itheima.net/api/area',
            params: {
              pname,
              cname
            }
          })
        })
        .then(res => {
          console.log(res)
          const aname = res.data.list[0]
          document.querySelector('.area').innerHTML = aname
        })
    </script>
  </body>
</html>
